<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4 sticky-top">
    <div class="container-fluid">
      <router-link class="navbar-brand" :to="{ name: 'home' }">停车场管理</router-link>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link :class="rout_name == 'home' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'home' }">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link :class="rout_name == 'dailyAnalysis' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'dailyAnalysis' }">日分析</router-link>
          </li>
          <li class="nav-item">
            <router-link :class="rout_name == 'provinceAnalysis' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'provinceAnalysis' }">省份分析</router-link>
          </li>
          <li class="nav-item">
            <router-link :class="rout_name == 'parkingStatus' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'parkingStatus' }">停车场状态</router-link>
          </li>
          <li class="nav-item">
            <router-link :class="rout_name == 'offcar' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'offcar' }">正常出场</router-link>
          </li>
          <li class="nav-item">
            <router-link :class="rout_name == 'offcarabnormal' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'offcarabnormal' }">异常出场</router-link>
          </li>
          <li class="nav-item" v-if="isAuthenticated && userInfo?.role == 'admin'">
            <router-link :class="rout_name == 'feeCalculation' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'feeCalculation' }">费用分析</router-link>
          </li>
          <li class="nav-item" v-if="isAuthenticated && userInfo?.role == 'admin'">
            <router-link :class="rout_name == 'setting' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'setting' }">设置</router-link>
          </li>
        </ul>
      </div>
      <div class="nav-item" v-if="!isAuthenticated">
        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" :to="{ name: 'login' }">登录</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="{ name: 'register' }">注册</router-link>
          </li>
        </ul>
      </div>
      <!-- 个人信息 -->
      <el-dropdown v-else>
        {{ userInfo?.role === 'user' ? '工作人员' : '管理人员' }}
        <template #dropdown>
          <el-dropdown-menu class="downMenu">
            <el-dropdown-item class="downitem" @click="handleLogout">
              <div style="width: 100%;">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </nav>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let rout_name = computed(() => router.name);
const accessToken = ref(localStorage.getItem("access_token") || "");
const userInfo = ref(JSON.parse(localStorage.getItem("user_info") || "{}"));
// 计算是否已认证
const isAuthenticated = computed(() => !!accessToken.value);
onMounted(() => {
  // 初始化时更新变量
  accessToken.value = localStorage.getItem("access_token") || "";
  userInfo.value = JSON.parse(localStorage.getItem("user_info") || "{}");

  // console.log("当前令牌:", accessToken.value);
  // console.log("用户信息:", userInfo.value);
  // console.log("用户信息:", isAuthenticated);
});

// 退出登录方法
const handleLogout = () => {
  localStorage.removeItem("access_token");
  localStorage.removeItem("user_info");
  window.location.reload();
  accessToken.value = "";
  userInfo.value = {};
  router.push({ name: "home" });
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
